<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11事件处理能力</title>
    <style>
        .redBorder{
            border-color: red;
            border-width: 1px;
            border-style: solid;
        }
    </style>
</head>
<body>
<div id="app">
    计算器：{{ counter }}<br>
    <button v-on:click="counter++">counter++</button>
    <button v-on:click="addCounter01">addCounter01()-调用时不加括号</button>
    <button v-on:click="addCounter01()">addCounter01()-调用时加括号</button>
    <!--1、method没有参数
           加括号调用成功，会隐式传递事件对象event
           不加括号调用成功，会隐式传递事件对象event
        2、method有一个参数
           加括号+传参调用成功，method的实参值为所传值，会隐式传递事件对象event
           加括号+不传参调用成功，method的实参值为undefined，会隐式传递事件对象event
           不加括号调用成功，method的实参值为事件对象event，会隐式传递事件对象event
        3、method有多个参数
           加括号+传部分参调用成功，method的实参值为所传值未传的实参值为undefined，会隐式传递事件对象event
           加括号+传所有参调用成功，method的实参值为所传值，会隐式传递事件对象event
           加括号+不传参调用成功，method的所有实参值均为undefined，会隐式传递事件对象event
           不加括号调用成功，method的第一个实参值为事件对象event，剩余参数值为undefined，会隐式传递事件对象event
    -->
    <button v-on:click="addCounter02">addCounter02()-调用时不加括号</button>
    <button v-on:click="addCounter02()">addCounter02()-调用时加括号-不传参</button>
    <button v-on:click="addCounter02($event)">addCounter02()-调用时加括号-传参</button>
    <button v-on:click="addCounter03(5)">addCounter03()</button>
    <button v-on:click="addCounter04">addCounter04-调用时不加括号</button>
    <button v-on:click="addCounter04()">addCounter04()-调用时加括号-不传参</button>
    <button v-on:click="addCounter04($event)">addCounter04()-调用时加括号-传部分参</button>
    <button v-on:click="addCounter04(5, $event)">addCounter04()-调用时加括号-传所有参</button>
    <!--事件修饰符-->
    <div v-on:click="counter++">
        <button v-on:click="counter+=2">counter++不阻止冒泡</button>
        <button v-on:click.stop="counter+=2">counter++阻止冒泡</button>
        <button v-on:click.once="counter+=2">counter+=2仅执行一次</button>
    </div>
    <button v-on:keyup.enter="counter++">摁下enter触发counter++</button>
    <!--keyup也会触发click-->
    <button v-on:keyup.enter="counter++" v-on:click="counter++">摁下enter/鼠标单击触发counter++</button>
    <!--keyup不会触发click？？？-->
    <button v-on:keyup.enter="counter++" v-on:click="counter++">摁下enter/鼠标单击触发counter++</button>
</div>
<script src="../vue.global.3.0.5.js"></script>
<script>
    //声明一个选项对象
    const App={
        //初始数据
        data() {
            return {
                counter: 100,
            }
        },
        methods: {
            addCounter01: function() {
                this.counter+=2;
                //不传参时event默认是事件对象
                console.log(event.target.innerText);
            },
            addCounter02(e) {
                this.counter+=2;
                //显式传参能自定义事件对象参数名
                console.log(event.target.innerText);
                console.log(e.target.innerText);
            },
            addCounter03(number) {
                this.counter+=number;
                //不传参时event默认是事件对象
                console.log(event.target.innerText);
            },
            addCounter04(number, e) {
                //this.counter+=number;
                //显式传参能自定义事件对象参数名
                console.log("event.target.innerText="+event.target.innerText);
                console.log("number.target.innerText="+number.target.innerText);
                console.log("e.target.innerText="+e.target.innerText);
            }
        },
        computed: {
            compClassName: {
                get() {
                    
                },
                set(value) {

                }
            }
        }
    }

    //全局API对象，创建应用对象返回(选项对象).挂载方法(DOM节点)
    const vm = Vue.createApp(App).mount("#app");
</script>
</body>
</html>